import { type TableInstance } from "element-plus";
import { PropType } from "vue";

export default defineComponent({
  name: "KkPageComponent",
  props: {
    data: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    // 显示的列内容
    columns: {
      type: Array as PropType<
        Array<{
          prop: string;
          label: string;
          type?: "default" | "img";
          width?: string | number;
          render?: (row: any) => VNode | Element | string | number;
        }>
      >,
      required: true,
    },
    // 显示多选框
    showSelection: {
      type: Boolean,
      default: false,
    },
    // 显示多选框
    showIndex: {
      type: Boolean,
      default: false,
    },
    // 分页
    // 可选页面条数
    pageSizes: {
      type: Array as PropType<number[]>,
      default: () => [20, 30, 50, 100],
    },
    // 总条数
    totalSize: {
      type: Number,
      default: 0,
    },
    // 一页几条
    pageSize: {
      type: Number,
      default: 20,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
  },
  // 添加select-change事件
  emits: ["pushPage", "pushPageSize"],
  setup(props, { slots, emit, expose }) {
    const tableRef = ref<TableInstance>();
    // 获取选中的table列表数据
    const selectItemExpose = () => {
      return tableRef.value?.getSelectionRows();
    };
    // 清空选中
    const clearlectExpose = () => {
      return tableRef.value?.clearSelection();
    };
    // 对父级暴露方法
    expose({
      selectItemExpose,
      clearlectExpose,
    });

    return () => (
      <div class="container">
        <el-table ref={tableRef} data={props.data} border>
          {props.showSelection && (
            <el-table-column
              type="selection"
              align="center"
              width="35px"
              fixed="left"
            />
          )}
          {props.showIndex && (
            <el-table-column
              type="index"
              label="序号"
              width="60px"
              fixed="left"
            />
          )}

          {props.columns.map((column) => (
            <el-table-column
              prop={column.prop}
              label={column.label}
              width={column.type === "img" ? "100px" : column.width}
              align={column.type === "img" ? "center" : "left"}
            >
              {{
                default: ({ row }: { row: any }) =>
                  column.render ? (
                    column.render(row)
                  ) : column.type === "img" ? (
                    <el-image
                      class="w-40px h-40px"
                      src={row[column.prop]}
                      preview-teleported={true}
                      preview-src-list={
                        Array.isArray(row.imgList)
                          ? row.imgList
                          : [row[column.prop]]
                      }
                    />
                  ) : (
                    row[column.prop]
                  ),
              }}
            </el-table-column>
          ))}
          {slots.default?.()}
        </el-table>
        <div class="flex items-center pt-10px">
          <div class="mr-10px">{slots.beforePage && slots.beforePage()}</div>
          <el-pagination
            current-page={props.currentPage}
            page-size={props.pageSize}
            page-sizes={props.pageSizes}
            total={props.totalSize}
            size="small"
            layout="total, sizes, prev, pager, next, jumper"
            onCurrentChange={(val: number) => emit("pushPage", val)}
            onSizeChange={(val: number) => emit("pushPageSize", val)}
          />
        </div>
      </div>
    );
  },
});
